<template>
    <!-- 未完成：
        1   购买表单提交 发起请求
        2   加载更多  通过常量 发起请求
        3   类型筛选  发起请求
     -->
    <div class="main">
        <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
                <img style="width:100%;height:100%" src="../../../../public/top.jpg">
            </el-carousel-item>
        </el-carousel>
        <!-- 抽屉 -->
        <el-drawer
            title="购买"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose">
            <div style="padding: 10px;">
                <el-form size='mini' :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                    <div style="margin-left:20px;display: flex;flex-direction:row;margin-bottom:10px;">
                        <img src="../../../../public/top.jpg" style="width:100px;height:100px">
                        <div style="width:60%;padding-left:10px;word-break:break-all;word-wrap:break-word;">商品描述：12321312312312312321312321321321312321321312</div>
                    </div>
                    <el-form-item label="订单号">
                        {{ruleForm.loginId}}
                    </el-form-item>
                    <el-form-item label="购买人">
                        {{ruleForm.loginId}}
                    </el-form-item>
                    <el-form-item label="购买日期">
                        {{ruleForm.loginId}}
                    </el-form-item>
                    <el-form-item label="联系电话">
                        {{ruleForm.loginId}}
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-steps :active="ruleForm.status" finish-status="success">
                            <el-step title="待发货"></el-step>
                            <el-step title="配送中"></el-step>
                            <el-step title="已完成"></el-step>
                        </el-steps>
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <el-select v-model="ruleForm.roleName" placeholder="请选择">
                            <el-option
                            v-for="item in option"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.roleName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">购买</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
        </el-drawer>
    </div>
</template>
<style scoped>
.main{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
<script>
    import {ADMIN_CONSTANT,ROLELISTGTE} from '../../../utils/constant.js'
    import * as adminApi from '../../../api/adminApi.js'
    import * as roleApi from '../../../api/roleApi.js'
    export default{
        name:'IndexIntegralStore',
        created () {
            
            this.getTableData()
            this.option =roleApi.findTableData(ROLELISTGTE)
        },
        data() {
            //验证角色名称
            var validateLoginId = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    callback();
                }
            };
            return {
                //抽屉是否打开
                drawer: false,
                //筛选条件
                recommend:"",
                //积分区间
                integralType:[
                    { type: '', label: '5g'},
                    { type: '', label: '4g'},
                    { type: '', label: '3g'},
                    { type: '', label: '2g'},
                    { type: '', label: '500'}
                ],
                //积分余额
                interval:0,
                //精品推荐测试数据
                recommend_test:[
                    {id:'1', decription:"啦啦啦啦",img_src:"../../../../public/top.jpg"},
                    {id:'2', decription:"啦啦啦啦啦啦啦啦啦啦啦啦",img_src:"../../../../public/top.jpg"}
                ],
                //商品测试数据
                screen_test: [
                    {id:'1', decription:"啦啦啦啦",img_src:"../../../../public/top.jpg",price: '5元'},
                    {id:'2', decription:"啦啦啦啦啦啦啦啦啦啦啦啦",img_src:"../../../../public/top.jpg",price: '5元'},
                    {id:'3', decription:"啦啦啦啦啦啦啦啦啦啦啦啦",img_src:"../../../../public/top.jpg",price: '5元'},
                    {id:'4', decription:"啦啦啦啦啦啦啦啦啦啦啦啦",img_src:"../../../../public/top.jpg",price: '5元'},
                    {id:'5', decription:"啦啦啦啦啦啦啦啦啦啦啦啦",img_src:"../../../../public/top.jpg",price: '5元'},
                    {id:'6', decription:"啦啦啦啦啦啦啦啦啦啦啦啦",img_src:"../../../../public/top.jpg",price: '5元'}
                ],
                loading: false,
                end:false,
                //是否搜索
                isSerach:false,
                //搜索内容
                input: '',
                //数据总数量
                count:0,
                //当前页
                pageIndex:1,
                // 表单数据
                ruleForm: {
                    status: 2,
                    loginId: '',
                    loginPwd: '',
                    name: '',
                    phone: '',
                    sex: '',
                    roleName:'',
                    loginPwd2:''
                },
                // 表单验证数据
                rules: {
                    loginId: [
                        // 失去光标触发函数
                        { validator: validateLoginId, trigger: 'blur' }
                    ],
                },

            }
        },
        computed: {
            noMore () {
                return this.end
            },
            disabled () {
                return this.loading || this.noMore
            }
        },
        methods: {
            //筛选
            choseFun(type,choseType){
                this.recommend = type
                console.log(this.recommend);
                this[choseType].forEach(v=>{
                    if(v.label === type && v.type === ""){
                        v.type = "primary" 
                    }else if(v.type === "primary" && v.label !== type){
                        v.type = ""
                    }
                })
                //发起请求   渲染数据  this.recommend:筛选条件
            },
            load(){
                this.loading = true
                setTimeout(() => {
                        for(let i=0;i<3;i++){
                        this.testList.push({
                            name:'a'
                        })
                    }
                    this.loading = false
                }, 2000)
                console.log(1111);
                
            },
            //搜索
            serach(){
                this.isSerach = true
                this.getTableData()
                this.isSerach = false
            },
            //获取表格数据
            //data 单页数据   count 后台数据总数量 用于分多少页
            getTableData(){
                let {data,count} = adminApi.findAdminList(ADMIN_CONSTANT.ADMINLISTGET,{
                    serach:{
                        isSerach:this.isSerach,
                        roleName:this.input
                    },
                    pageIndex:this.pageIndex,
                    singlePageCount:8
                })  
                this.tableData = data 
                this.count = count
            },
            //关闭抽屉
            handleClose(done) {
                done();
            },
            //页跳转
            currentChange(val){
                this.pageIndex = val
                this.getTableData()
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>